import styled from "styled-components";

export const ViewWrapper = styled.div`
  position: relative;
  padding: 8px 0;
  .scroll{
    overflow: hidden;
  }
  .scroll-content{
    display: flex;
    transition: transform ease 300ms;
  }
  .control{
    position: absolute;
    top: 50%;
    color: #333;
    font-size: 14px;
    z-index: 9;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .14);
    cursor: pointer;
    background: #fff;
  }
  .control.left{
    left: 0;
    transform: translate(-50%, -50%);
  }
  .control.right{
    right: 0;
    transform: translate(50%, -50%);
  }
`